<script setup>
import {useRoute} from "vue-router";
import { reactive, ref, toRefs} from "vue";
import {getOrderInfoFromOrderIdService, getOrderItemService, goPayFormService} from "@/api/cartOrder";



const route=useRoute();
const orderId=reactive(route.query.orderId);
const orderItemData=ref([])
let isChangeAddress=ref(false);
const finalOrderData=ref({
  orderid:'',
  username:'',
  billtofirstname:'',
  billtolastname:'',
  billaddr1:'',
  billaddr2:'',
  billcity:'',
  billstate:'',
  billzip:'',
  billcountry:'',
  shiptofirstname:'',
  shiptolastname:'',
  shipaddr1:'',
  shipaddr2:'',
  shipcity:'',
  shipstate:'',
  shipzip:'',
  shipcountry:'',
  totalprice:'',
})
const ChangeShipAddr=()=>{
  isChangeAddress.value = !isChangeAddress.value;
  console.log(isChangeAddress.value+"  change")
}
const initOrder=async(orderId)=>{
  const data=await getOrderItemService(orderId);
  const data2=await getOrderInfoFromOrderIdService(orderId);
  console.log('confirmOrder  data.status = '+data.status);
  if(data.status==1){
    orderItemData.value=data.data;
    console.log('data.data=', JSON.stringify(data.data));
  }else{
    alert('confirmOrder失败');
  }

  if(data2.status==1){
    finalOrderData.value=data2.data;
    console.log(JSON.stringify(data2.data))
  }else{
    alert('confirmOrder失败');
  }

  getTotal();
}
initOrder(orderId);

const itemPriceTotal=(item)=>{
  return item.quantity*item.unitprice;
}

const goPayForm=async () => {
  console.log('result.status11111=='+orderId);

  console.log(finalOrderData.value)
  let result = await goPayFormService(orderId, finalOrderData.value);
  console.log('result.status' + result.status);
  if(result.status===1){
    console.log(result.status);
    console.log(result.data.qrcode);
    window.location.href=result.data.qrcode;
    // await router.push({
    //   path: '/payForm',
    //   query: {
    //     qrcode:result.data.qrcode
    //   }
    // });
  }else{

    alert('支付失败');
  }
}


const getTotal=()=>{
  let sum = 0;
  // 使用 toRefs 将 data 转换为 ref 对象
  const refs = toRefs(orderItemData.value);
  // 遍历 ref 对象，并将值添加到数组中
  const dataArray = Object.values(refs).map(ref => ref.value);
  // 遍历数组，计算总和
  dataArray.forEach(CartItem => {
    sum += itemPriceTotal(CartItem);
  });
  finalOrderData.value.totalprice = sum;
}

</script>

<template>
  <div id="show">
    <div id="petName">Confirm Order</div>
    <div id="orderContent">
      <div id="itemInfoContent">
        <table id="ItemOrderTable">
            <caption align="top">commodity Information</caption>
            <thead>
            <th class="itemOrderTableTitle">Item Id</th>
            <th class="itemOrderTableTitle">Quantity</th>
            <th class="itemOrderTableTitle">Total Price</th>
          </thead>
          <tr v-for="item in orderItemData" :key="item.itemid">
            <td class="itemOrderTableInfo">
              <span class="itemInfo"  name="itemid">{{ item.itemid }}</span>
            </td>
            <td class="itemOrderTableInfo">
              <span class="itemInfo" name="quantity">{{ item.quantity }}</span>
            </td>
            <td class="itemOrderTableInfo">
              <span class="itemInfo"  name="totalprice">{{ itemPriceTotal(item) }}</span>
            </td>
          </tr>
        </table>
      </div>
      <div id="accountInfoContent">


          <table class="accountOrderTable">
            <caption align="top">address Information</caption>
<!--            <tr>-->
<!--              <th colspan="2"></th>-->
<!--            </tr>-->
            <tr>
              <td class="accountOrderTableTitle">收件人：</td>
              <td class="accountOrderTableInfo" name="username">{{ finalOrderData.username }}</td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">First name:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" type="text" name="billtofirstname" v-model="finalOrderData.billtofirstname"/>
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">Last name:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix"   type="text" name="billtolastname" v-model="finalOrderData.billtolastname"/>
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">Address 1:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" type="text" name="billaddr1" v-model="finalOrderData.billaddr1"/>
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">Address 2:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" type="text" name="billaddr2" v-model="finalOrderData.billaddr2"/>
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">City:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" type="text" name="billcity" v-model="finalOrderData.billcity"/>
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">State:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" type="text" name="billstate" v-model="finalOrderData.billstate"/>
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">Zip:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" type="text" name="billzip" v-model="finalOrderData.billzip"/>
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">Country:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" type="text" name="billcountry" v-model="finalOrderData.billcountry"/>
              </td>
            </tr>
            <tr id="new" v-if="!isChangeAddress">
              <td colspan="2">
                <label class="radio_label">
                  <input type="radio" name="status" id="ship" value="1" style="display: none;" @click="ChangeShipAddr">点击添加收货地址
                </label>
              </td>
            </tr>
            <tr v-if="isChangeAddress" id="firstShipTr">
              <th colspan="2" id="shipAdd" >Shipping Address</th>
            </tr>
            <tr v-if="isChangeAddress">
              <td class="accountOrderTableTitles">First name:</td>
              <td class="accountOrderTableInfos"><input type="text" name="shiptofirstname" v-model="finalOrderData.shiptofirstname"/></td>
            </tr>
            <tr v-if="isChangeAddress">
              <td class="accountOrderTableTitles">Last name:</td>
              <td class="accountOrderTableInfos"><input type="text" name="shiptolastname" v-model="finalOrderData.shiptolastname"/></td>
            </tr>
            <tr v-if="isChangeAddress">
              <td class="accountOrderTableTitles">Address 1:</td>
              <td class="accountOrderTableInfos"><input type="text" name="shipaddr1" v-model="finalOrderData.shipaddr1"/></td>
            </tr>
            <tr v-if="isChangeAddress">
              <td class="accountOrderTableTitles">Address 2:</td>
              <td class="accountOrderTableInfos"><input type="text" name="shipaddr2" v-model="finalOrderData.shipaddr2"/></td>
            </tr>
            <tr v-if="isChangeAddress">
              <td class="accountOrderTableTitles">City:</td>
              <td class="accountOrderTableInfos"><input type="text" name="shipcity" v-model="finalOrderData.shipcity"/></td>
            </tr>
            <tr v-if="isChangeAddress">
              <td class="accountOrderTableTitles">State:</td>
              <td class="accountOrderTableInfos"><input type="text" name="shipstate" v-model="finalOrderData.shipstate"/></td>
            </tr>
            <tr v-if="isChangeAddress">
              <td class="accountOrderTableTitles">Zip:</td>
              <td class="accountOrderTableInfos"><input type="text" name="shipzip" v-model="finalOrderData.shipzip"/></td>
            </tr>
            <tr v-if="isChangeAddress">
              <td class="accountOrderTableTitles">Country:</td>
              <td class="accountOrderTableInfos"><input type="text" name="shipcountry" v-model="finalOrderData.shipcountry"/></td>
            </tr>
            <tr id="cancel" v-if="isChangeAddress">
              <td colspan="2">
                <label class="radio_label">
                  <input type="radio" name="status" id="close" value="2" style="display: none;" checked @click="ChangeShipAddr"> 取消新加收货地址
                </label>
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">订单编号：</td>
              <td class="accountOrderTableInfo">
                <input name="orderid" readonly="readonly" v-model="finalOrderData.orderid">
              </td>
              <!--              <td class="accountOrderTableInfo"><input th:value="${order.orderid}" name="orderid" readonly="readonly"></td>-->
            </tr>
          </table>

        <div id="submitOrder">
          <span>合计:$</span>
          <input id="total" name="totalprice" readonly="readonly" v-model="finalOrderData.totalprice">

          <span>
            <button id="check"  @click="goPayForm()">确认订单，去付款</button>
          </span>
        </div>

      </div>
    </div>
  </div>
</template>

<style>

#orderContent{
  width: 500px;
  margin-left: 35%;
  border: 2px solid green;
  border-radius: 20px;
  text-align: center;
}
#itemInfoContent{
  /*margin-left: 10%;*/
  /*width: 100%;*/
  padding-left: 6%;
  padding-top: 4%;
  border-bottom: 2px dashed gray;
}
#accountInfoContent{
  padding-left: 6%;
  padding-top: 2%;
  width: 100%;
  padding-bottom: 20px;
}
 caption{
  color: #fff;
  background-color: #35813b;
  border-bottom: 2px solid #37833d;
  border-right: 1px solid #c1efca;
  border-top: 1px solid #97d690;
  /*text-align: center;*/
  text-shadow: -1px -1px 1px #666666;
  letter-spacing: 2px;
  width:100%;
  font-weight: bold;
  height:25px;
  vertical-align: center;
   padding-top: 10px;
  font-size: 20px;
   padding-bottom: 5px;
}
 #ItemOrderTable{
   padding-bottom: 20px;
   width: 435px;
 }
#ItemOrderTable th{
  color: #333333;
  font-size: 20px;
  font-weight: normal;
  background: none;
  border:none;
  text-align: center;
  padding: 0px 20px 5px 40px;
  white-space: nowrap; /* 防止换行 */
  width: auto; /* 根据内容调整宽度 */
}
.accountOrderTable{
  border-bottom: 2px dashed gray;
}
.accountOrderTable td:first-child {
  color: #333333;
  font-size: 20px;
  text-align: center;
  padding: 0;
  background: none;
  border: none;
  font-weight: normal;
}
.accountOrderTable td:nth-child(2){
  color: #333333;
  font-size: 20px;
  text-shadow: 1px 1px 1px #ffffff;
  font-weight: normal;
  background: none;
  border-right: none;
  /*border-bottom: 1px solid #333333;*/
  text-align: center;
  padding: 6px 2px;
  border-bottom: none;

}
.accountOrderTable input{
  width: 315px;
  height: 20px;
}
#new{
  background: #c1efca;
}
#cancel{
  background: #c1efca;
}
.radio_label{
  color: #54c07a;
  font-weight: bold;
  text-align: center;
}
input#total{
  border:none;
  outline: none;
  width: 75px;
  font-size: 18px;
}

</style>